
<div class="header"><span>{:date('H:i')}</span></div>
<div class="container">
    <div class="content">
        <div>{$title|default=''}</div>
        <div class="date">{:date('m月d日')}</div>
        <video src="{$url|default=''}" width="100%" controls preload></video>
    </div>
</div>
<style>
    .header {
        margin-top: 15px;
        text-align: center
    }

    .header span {
        padding: 5px;
        font-size: 8px;
        background: #ccc;
        border-radius: 10%
    }
    .container {
        position: relative;
        display: block;
        margin: 5vw auto;
        width: 90%;
        color: #333;
        text-overflow: ellipsis;
    }
    .container .content {
        left: 0 !important;
        border: 1px solid #ccc;
        padding: 13px;
        position: relative;
        max-width: initial !important;
        background: #fff;
        line-height: 1.5em;
        border-radius: 5px
    }

    .container .content div {
        width: 100%;
        overflow: hidden;
        font-size: .8rem;
        line-height: 1.5em;
        display: inline-block;
        text-overflow: ellipsis
    }

    .container .content .date {
        color: #999;
        margin: 10px 0;
        font-size: 12px;
        line-height: 1em
    }
</style>